import { useRef, useState } from 'react';
import { Row, Col, Input } from 'antd';
const { Search } = Input
import {
    EditableProTable
} from '@ant-design/pro-components';
import { ROW_ID_KEY } from '../../../constants';
import { useIntl } from "umi";
import { paginationQueryAttackRecordList } from "@/services/attackRecord";
import { paginationQuery } from '../../../services/competition';
const PaginationQueryAttackRecordTable = ({ data }) => {
    const intl = useIntl();
    const [context, setContext] = useState(); //模糊搜索关键词
    const [paginationData, setPaginationData] = useState({ 'current': 1, 'pageSize': 10, 'total': 0 });
    const ref = useRef();
    async function getData(params) {
        params.context = context
        let res = await paginationQueryAttackRecordList(params);
        if (res.success) {
            let resData = {
                ...res?.data,
                data: res?.data?.records
            }
            setContext()
            return resData
        }
    };
    let onSearch = (value) => {
        setContext(value)
        ref.current.reload();
    };
    let onPaginationChange = (current, pageSize) => {
        setPaginationData({ ...paginationData, current, pageSize })
        getData({ context: context, current, current, pageSize, pageSize })
    }
    // columns
    const columns = [
        {
            title: '赛事名称',
            dataIndex: 'compName',
            ellipsis: true,
            width: 160,
            editable: false,
        },
        {
            title: '攻击队伍名称',
            dataIndex: 'attackerTeamName',
            hideInSearch: true,
            editable: false,
        },
        {
            title: '攻击队伍分数',
            dataIndex: 'attackerTeamScore',
            hideInSearch: true,
            editable: false,
        },
        {
            title: '被攻击队伍名称',
            dataIndex: 'teamUnderAttackName',
            hideInSearch: true,
            editable: false,
        },
        {
            title: '被攻击队伍分数',
            dataIndex: 'teamUnderAttackScore',
            hideInSearch: true,
            editable: false,
        },
        {
            title: '攻击者得分',
            dataIndex: 'scores',
            hideInSearch: true,
            editable: false,
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            valueType: 'dateTime',
            hideInSearch: true,
        },
        {
            title: '攻击者',
            dataIndex: 'createBy',
            hideInSearch: true,
        }
    ];
    return (
        <>
            <EditableProTable
                actionRef={ref}
                search={false}
                options={{ fullScreen: false, reload: true, density: true, setting: true }}
                columns={columns}
                request={async (params = {}) => getData(params)
                }
                recordCreatorProps={false}
                pagination={{
                    pageSize: paginationData.pageSize,
                    total: paginationData.total,
                    current: paginationData.current,
                    showSizeChanger: true,
                    onChange: onPaginationChange
                }}
                rowKey={ROW_ID_KEY}
                dateFormatter="string"
                headerTitle='攻击记录'
                toolBarRender={() => [
                    <>
                        <Row align='middle' justify='space-between' style={{ width: '400px' }}>
                            <Col span={19}>
                                <Search
                                    style={{ width: '290px' }}
                                    placeholder="请输入赛事名称关键词"
                                    onSearch={onSearch}
                                />
                            </Col>
                        </Row>

                    </>
                ]}
            ></EditableProTable>
        </>
    );
};
export default PaginationQueryAttackRecordTable;